<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Nginx | yanyan</title>
    <meta name="description" content="Yan&#39;s blog">
    <meta name="generator" content="VuePress 1.4.0">
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    
    <link rel="preload" href="/assets/css/0.styles.e1b3f17d.css" as="style"><link rel="preload" href="/assets/js/app.e358a08d.js" as="script"><link rel="preload" href="/assets/js/2.88fa18d1.js" as="script"><link rel="preload" href="/assets/js/15.51129890.js" as="script"><link rel="prefetch" href="/assets/js/10.23baf844.js"><link rel="prefetch" href="/assets/js/11.45c148ba.js"><link rel="prefetch" href="/assets/js/12.e5930132.js"><link rel="prefetch" href="/assets/js/13.0547cd14.js"><link rel="prefetch" href="/assets/js/14.3e67795b.js"><link rel="prefetch" href="/assets/js/16.6987f89d.js"><link rel="prefetch" href="/assets/js/17.2807cff5.js"><link rel="prefetch" href="/assets/js/18.855e1707.js"><link rel="prefetch" href="/assets/js/19.6da24791.js"><link rel="prefetch" href="/assets/js/20.e24d4aef.js"><link rel="prefetch" href="/assets/js/21.6efc6fba.js"><link rel="prefetch" href="/assets/js/22.10447f0f.js"><link rel="prefetch" href="/assets/js/23.9154cc24.js"><link rel="prefetch" href="/assets/js/24.9ad529fc.js"><link rel="prefetch" href="/assets/js/25.4c092e0a.js"><link rel="prefetch" href="/assets/js/26.debdaa01.js"><link rel="prefetch" href="/assets/js/27.8b90b660.js"><link rel="prefetch" href="/assets/js/28.1a323e01.js"><link rel="prefetch" href="/assets/js/29.6f108fc9.js"><link rel="prefetch" href="/assets/js/3.7210d3aa.js"><link rel="prefetch" href="/assets/js/30.e7df1937.js"><link rel="prefetch" href="/assets/js/31.2cb3120f.js"><link rel="prefetch" href="/assets/js/32.eb64932c.js"><link rel="prefetch" href="/assets/js/33.cac3e2f0.js"><link rel="prefetch" href="/assets/js/34.19ea35c4.js"><link rel="prefetch" href="/assets/js/35.fadf5d03.js"><link rel="prefetch" href="/assets/js/36.88b681f1.js"><link rel="prefetch" href="/assets/js/37.2a799db9.js"><link rel="prefetch" href="/assets/js/38.2741a2bf.js"><link rel="prefetch" href="/assets/js/39.359ceb72.js"><link rel="prefetch" href="/assets/js/4.9e938666.js"><link rel="prefetch" href="/assets/js/40.56fd4a10.js"><link rel="prefetch" href="/assets/js/41.e72117ad.js"><link rel="prefetch" href="/assets/js/42.63a6e190.js"><link rel="prefetch" href="/assets/js/43.c8072421.js"><link rel="prefetch" href="/assets/js/44.84cd8367.js"><link rel="prefetch" href="/assets/js/45.0ac810b0.js"><link rel="prefetch" href="/assets/js/46.bb83ff34.js"><link rel="prefetch" href="/assets/js/47.a9333a81.js"><link rel="prefetch" href="/assets/js/48.526b5494.js"><link rel="prefetch" href="/assets/js/49.73b61cc6.js"><link rel="prefetch" href="/assets/js/5.88b252c7.js"><link rel="prefetch" href="/assets/js/50.f34ab799.js"><link rel="prefetch" href="/assets/js/51.d06a49d9.js"><link rel="prefetch" href="/assets/js/52.348d5482.js"><link rel="prefetch" href="/assets/js/6.0face56b.js"><link rel="prefetch" href="/assets/js/7.31eca58d.js"><link rel="prefetch" href="/assets/js/8.69e9ce95.js"><link rel="prefetch" href="/assets/js/9.f25df9e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e1b3f17d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">yanyan</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/html/001" class="sidebar-heading clickable"><span>HTML</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/css/image" class="sidebar-heading clickable"><span>CSS</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js/001" class="sidebar-heading clickable"><span>JS-基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-v8/001" class="sidebar-heading clickable"><span>JS-V8引擎原理 </span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-async/001" class="sidebar-heading clickable"><span>JS-异步I/O及异步编程</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/http/000" class="sidebar-heading clickable"><span>HTTP</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/extend/002" class="sidebar-heading clickable open"><span>拓展阅读</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/extend/002.html" class="sidebar-link">01.实现一个简单的Webpack</a></li><li><a href="/extend/001.html" class="active sidebar-link">02.Nginx</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/extend/001.html#_1-负载均衡" class="sidebar-link">1.负载均衡</a></li><li class="sidebar-sub-header"><a href="/extend/001.html#_2-反向代理" class="sidebar-link">2.反向代理</a></li><li class="sidebar-sub-header"><a href="/extend/001.html#_3-https-配置" class="sidebar-link">3.Https 配置</a></li><li class="sidebar-sub-header"><a href="/extend/001.html#_4-常用的配置" class="sidebar-link">4.常用的配置</a></li><li class="sidebar-sub-header"><a href="/extend/001.html#_5-如何使用nginx" class="sidebar-link">5.如何使用Nginx</a></li></ul></li><li><a href="/extend/003.html" class="sidebar-link">03.vue router源码</a></li><li><a href="/extend/004.html" class="sidebar-link">04.防抖、节流</a></li><li><a href="/extend/005.html" class="sidebar-link">05.图片懒加载</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="nginx"><a href="#nginx" class="header-anchor">#</a> Nginx</h1> <p>随着前端变革，Nginx也成为了前端开发工程师必不可少应该具备的一项技能了，那nginx到底起的是吗作用？其实Nginx一直跟我们息息相关，它既可以作为 Web 服务器，也可以作为负载均衡服务器，具备高性能、高并发连接等</p> <h2 id="_1-负载均衡"><a href="#_1-负载均衡" class="header-anchor">#</a> 1.负载均衡</h2> <p>当一个应用单位时间内访问量激增，服务器的带宽及性能受到影响，影响大到自身承受能力时，服务器就会宕机奔溃，为了防止这种现象发生，以及实现更好的用户体验，我们可以通过配置Nginx负载均衡的方式来分担服务器压力</p> <p>当有一台服务器宕机时，负载均衡器就分配其他的服务器给用户，极大的增加的网站的稳定性 当用户访问web时候，首先访问到的是负载均衡器，再通过负载均衡器将请求转发给后台服务器</p> <h3 id="_1-1-负载均衡的几种常用方式"><a href="#_1-1-负载均衡的几种常用方式" class="header-anchor">#</a> 1.1 负载均衡的几种常用方式</h3> <ul><li>轮询（默认）</li></ul> <div class="language- extra-class"><pre class="language-text"><code>// nginx.config
upstream backserver {
  server 192.168.0.1;
  server 192.168.0.2;
}
</code></pre></div><ul><li>权重weight
指定不同ip的权重，权重与访问比成正相关，权重越高，访问越大，适用于不同性能的机器</li></ul> <div class="language- extra-class"><pre class="language-text"><code>// nginx.config
upstream backserver {
  server 192.168.0.1 weight=2;
  server 192.168.0.2 weight=8;
}
</code></pre></div><ul><li>响应时间来分配
公平竞争，谁相应快，谁处理，不过这种方式需要依赖到第三方插件nginx-upstream-fair，需要先安装</li></ul> <div class="language- extra-class"><pre class="language-text"><code>// nginx.config
upstream backserver {
  server 192.168.0.1;
  server 192.168.0.2;
  fair;
}

server {
  listen 80;
  server_name localhost;
  location / {
    proxy_pass  http://backserver;
  }
}
</code></pre></div><h3 id="_1-2-健康检查"><a href="#_1-2-健康检查" class="header-anchor">#</a> 1.2 健康检查</h3> <p>Nginx 自带 ngx_http_upstream_module（健康检测模块）本质上服务器心跳的检查，通过定期轮询向集群里的服务器发送健康检查请求,来检查集群中是否有服务器处于异常状态</p> <p>如果检测出其中某台服务器异常,那么在通过客户端请求nginx反向代理进来的都不会被发送到该服务器上（直至下次轮训健康检查正常）</p> <div class="language- extra-class"><pre class="language-text"><code>upstream backserver{
  server 192.168.0.1  max_fails=1 fail_timeout=40s;
  server 192.168.0.2  max_fails=1 fail_timeout=40s;
}

server {
  listen 80;
  server_name localhost;
  location / {
    proxy_pass http://backend;
  }
}
</code></pre></div><p>涉及两个配置：</p> <ul><li>fail_timeout : 设定服务器被认为不可用的时间段以及统计失败尝试次数的时间段，默认为10s</li> <li>max_fails : 设定Nginx与服务器通信的尝试失败的次数，默认为：1次</li></ul> <h2 id="_2-反向代理"><a href="#_2-反向代理" class="header-anchor">#</a> 2.反向代理</h2> <p>反向代理指的是，当一个客户端发送的请求,想要访问服务器上的内容，但将被该请求先发送到一个代理服务器proxy,这个代理服务器（Nginx）将把请求代理到和自己属于同一个局域网下的内部服务器上,而用户通过客户端真正想获得的内容就存储在这些内部服务器上，此时Nginx代理服务器承担的角色就是一个中间人，起到分配和沟通的作用</p> <h3 id="_2-1-为什么需要反向代理？"><a href="#_2-1-为什么需要反向代理？" class="header-anchor">#</a> 2.1  为什么需要反向代理？</h3> <p>反向代理的优势主要有以下两点</p> <ul><li>防火墙作用
当你的应用不想直接暴露给客户端（也就是客户端无法直接通过请求访问真正的服务器，只能通过Nginx），通过nginx过滤掉没有权限或者非法的请求，来保障内部服务器的安全</li> <li>负载均衡
也就上一章提到负载均衡，本质上负载均衡就是反向代理的一种应用场景，可以通过nginx将接收到的客户端请求&quot;均匀地&quot;分配到这个集群中所有的服务器上(具体看负载均衡方式),从而实现服务器压力的负载均衡</li></ul> <h3 id="_2-2-如何使用反向代理"><a href="#_2-2-如何使用反向代理" class="header-anchor">#</a> 2.2 如何使用反向代理</h3> <p>我们通过模拟内部服务器的端口启动的nodejs项目设置反向代理到80端口访问</p> <div class="language- extra-class"><pre class="language-text"><code>// nginx.config
server  {
  listen 80;
  server_name localhost;
  location / {
    proxy_pass http://127.0.0.1:8000;（upstream）
  }
}
</code></pre></div><p>在 Nginx 反向代理是，会通过 location 功能匹配指定的 URI，然后把接收到的符合匹配 URI的请求通过 proxy_pass 转移给之前定义好的 upstream 节点池</p> <h2 id="_3-https-配置"><a href="#_3-https-配置" class="header-anchor">#</a> 3.Https 配置</h2> <p>Nginx 常用来配置Https认证，主要有两个步骤：签署第三方可信任的 SSL 证书 和 配置 HTTPS</p> <h3 id="_3-1-签署第三方可信任的-ssl"><a href="#_3-1-签署第三方可信任的-ssl" class="header-anchor">#</a> 3.1 签署第三方可信任的 SSL</h3> <p>配置 HTTPS 要用到私钥 example.key 文件和 example.crt 证书文件，而申请证书文件的时候要用到 example.csr 文件。</p> <h3 id="_3-2-nginx配置https"><a href="#_3-2-nginx配置https" class="header-anchor">#</a> 3.2 Nginx配置https</h3> <p>要开启 HTTPS 服务，在配置文件信息块(server)，必须使用监听命令 listen 的 ssl 参数和定义服务器证书文件和私钥文件，如下所示：</p> <div class="language- extra-class"><pre class="language-text"><code>server {
  #ssl参数
  listen              443 ssl; //监听443端口，因为443端口是https的默认端口。80为http的默认端口
  server_name         example.com;
  #证书文件
  ssl_certificate     example.com.crt;
  #私钥文件
  ssl_certificate_key example.com.key;
}
</code></pre></div><ul><li>ssl_certificate:证书的绝对路径</li> <li>ssl_certificate_key:  密钥的绝对路径;</li></ul> <h2 id="_4-常用的配置"><a href="#_4-常用的配置" class="header-anchor">#</a> 4.常用的配置</h2> <p>除了上述的这些，前端还可以用Nginx做些什么，多着呢～下面依依给你讲</p> <h3 id="_4-1-ip白名单"><a href="#_4-1-ip白名单" class="header-anchor">#</a> 4.1 IP白名单</h3> <p>可以配置nginx的白名单，规定有哪些ip可以访问你的服务器，防爬虫必备</p> <ul><li>简单配置</li></ul> <div class="language- extra-class"><pre class="language-text"><code>server {
  location / {
    deny  192.168.0.1; // 禁止该ip访问
    deny  all; // 禁止所有
  }
}
</code></pre></div><ul><li>白名单配置</li></ul> <div class="language- extra-class"><pre class="language-text"><code>vim /etc/nginx/white_ip.conf
 ...
192.168.0.1 1;
 ...
</code></pre></div><p>修改nginx配置(nginx.conf)</p> <div class="language- extra-class"><pre class="language-text"><code>geo $remote_addr $ip_whitelist{
  default 0;
  include ip.conf;
}
// geo 指令主要是可以根据指定变量的值映射出一个新变量。如果不指定变量，默认为$remote_addr
</code></pre></div><p>为匹配项做白名单设置</p> <div class="language- extra-class"><pre class="language-text"><code>server {
  location / {
    if ( $ip_whitelist = 0 ){
      return 403; //不在白名单返回 403
    }
    index index.html;
    root /tmp;
  }
}
</code></pre></div><h3 id="_4-2-适配pc与移动环境"><a href="#_4-2-适配pc与移动环境" class="header-anchor">#</a> 4.2 适配PC与移动环境</h3> <p>当用户从移动端打开PC端baidu.com的场景时，<a href="http://xn--m-3l8aa407ggyil19a3nbl41akm0azid.baidu.com" target="_blank" rel="noopener noreferrer">将自动跳转指移动端m.baidu.com<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>，本质上是Nginx可以通过内置变量$http_user_agent，获取到请求客户端的userAgent，从而知道当前用户当前终端是移动端还是PC，进而重定向到H5站还是PC站</p> <div class="language- extra-class"><pre class="language-text"><code>server {
  location / {
    //移动、pc设备agent获取
    if ($http_user_agent ~* '(Android|webOS|iPhone)') {
      set $mobile_request '1';
    }
    if ($mobile_request = '1') {
      rewrite ^.+ http://m.baidu.com;
    }
  }
}
</code></pre></div><h3 id="_4-3-配置gzip"><a href="#_4-3-配置gzip" class="header-anchor">#</a> 4.3 配置gzip</h3> <p>开启Nginx gzip，压缩后,静态资源的大小会大大的减少,从而可以节约大量的带宽,提高传输效率,带来更好的响应和体验</p> <div class="language- extra-class"><pre class="language-text"><code>server{
  gzip on; #启动
  gzip_comp_level 6; #压缩级别，1-10，数字越大压缩的越好
  gzip_min_length 100; #不压缩临界值，大于100的才压缩，一般不用改
  gzip_types application/javascript text/css text/xml;
  gzip_disable &quot;MSIE [1-6]\.&quot;;# IE6对Gzip不友好，对Gzip
  gzip_vary on;
}
</code></pre></div><h3 id="_4-4-nginx配置跨域请求"><a href="#_4-4-nginx配置跨域请求" class="header-anchor">#</a> 4.4 Nginx配置跨域请求</h3> <p>当出现403跨域错误的时候，还有 No 'Access-Control-Allow-Origin' header is present on the requested resource报错等，需要给Nginx服务器配置响应的header参数：</p> <div class="language- extra-class"><pre class="language-text"><code>location / {
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
  add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

  if ($request_method = 'OPTIONS') {
    return 204;
  }
}
</code></pre></div><h2 id="_5-如何使用nginx"><a href="#_5-如何使用nginx" class="header-anchor">#</a> 5.如何使用Nginx</h2> <p>通过在本地使用Nginx，从启动、更改、重启等环节来介绍Nginx的基本使用</p> <ul><li>如何启动sudo nginx</li> <li>修改nginx.conf 配置 (具体看你配置位置)vim /usr/local/etc/nginx/nginx.conf</li> <li>检查语法是否正常 sudo nginx -t</li> <li>重启nginx sudo nginx -s reload</li> <li>创建软链接(便于管理多应用nginx)</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/extend/002.html" class="prev">
        01.实现一个简单的Webpack
      </a></span> <span class="next"><a href="/extend/003.html">
        03.vue router源码
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.e358a08d.js" defer></script><script src="/assets/js/2.88fa18d1.js" defer></script><script src="/assets/js/15.51129890.js" defer></script>
  </body>
</html>
